<template>
  <div class="headerbox flexcolumn">
    <div class="flexbetween">
      <el-dropdown trigger="click">
        <span class="el-dropdown-link flexcenter commhover fw-6">
          <span class="droptitle textover">{{ queryParams.type }}</span
          ><i class="el-icon-caret-bottom el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" class="p-8">
          <el-dropdown-item
            v-for="(item, index) in typeList"
            :key="index"
            :class="{ 'pl-30': item.parentId }"
            >{{ item.name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
      <div class="flex">
        <el-button plain type="mini" class="p-5" @click="handleOpenGroup">建群</el-button>
        <el-button plain type="mini" class="p-5 ml-5" @click="handleOpenAddress">通讯录</el-button>
        <el-dropdown trigger="click" @command="handleCommand">
          <el-button plain type="mini" class="el-dropdown-link p-5 ml-5">
            <svg-icon class-name="search-icon" icon-class="imore" />
          </el-button>
          <el-dropdown-menu slot="dropdown" class="p-3">
            <el-dropdown-item command="a">消息排序</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <el-form
      ref="queryParams"
      :model="queryParams"
      label-width="0"
      class="queryformclass"
    >
      <el-form-item label="" prop="keyword" class="mt-">
        <el-input
          v-model="queryParams.keyword"
          size="mini"
          class="f-12"
          :placeholder="placeholdertext"
          suffix-icon="el-icon-search"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item label="" prop="qwlabel">
        <el-select v-model="queryParams.qwlabel" size="mini" class="w_full f-12" placeholder="企微标签">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="znlabel">
        <el-select v-model="queryParams.znlabel" size="mini" class="w_full f-12" placeholder="智能标签">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item> -->
    </el-form>
    <!-- 消息排序 -->
    <message-sort v-if="opensort" :visable="opensort" @close='handleCloseSort' />
    <!-- 建群 -->
    <create-group v-if="opengroup" :visable='opengroup' @close='handleCloseGroup' />
    <!-- 通讯录 -->
    <address-list v-if="openaddress" :visable='openaddress' @close='handleCloseAddress' />
  </div>
</template>

<script>
import MessageSort from "./MessageSort.vue";
import CreateGroup from './CreateGroup.vue'
import AddressList from './AddressList.vue'
export default {
  data() {
    return {
      typeList: [
        { id: 1, name: "全部消息" },
        { id: 2, name: "私聊" },
        { id: 3, name: "群聊" },
        { id: 4, name: "私聊未读" },
        { id: 5, name: "超1小时未读", type: "sub", parentId: 4 },
        { id: 6, name: "超24小时未读", type: "sub", parentId: 4 },
        { id: 7, name: "超48小时未读", type: "sub", parentId: 4 },
        { id: 8, name: "群聊未读" },
        { id: 9, name: "超1小时未读", type: "sub", parentId: 8 },
        { id: 10, name: "超24小时未读", type: "sub", parentId: 8 },
        { id: 11, name: "超48小时未读", type: "sub", parentId: 8 },
        { id: 12, name: "私聊未回复" },
        { id: 13, name: "群聊未回复" },
      ],
      queryParams: {
        type: "全部消息",
        keyword: "",
      },
      placeholdertext: "好友昵称/姓名/手机号/备注/群名称",
      opensort: false,
      opengroup:false,
      openaddress: false
    };
  },
  components: {
    MessageSort,
    CreateGroup,
    AddressList
  },
  methods: {
    handleCommand(command) {
      if (command == "a") {
        this.opensort = true
      }
    },

    handleCloseSort(){
      this.opensort = false
    },

    handleOpenGroup(){
      this.opengroup = true
    },

    handleCloseGroup(){
      this.opengroup = false
    },

    handleOpenAddress(){
      this.openaddress = true
    },

    handleCloseAddress(){
      this.openaddress = false
    },
  },
};
</script>

<style lang="scss" scoped>
.headerbox {
  padding: 12px;
  border-bottom: 1px solid #e9e9e9;
}
.droptitle {
  display: inline-block;
  max-width: 95px;
}
.queryformclass {
  .el-form-item {
    margin-bottom: 0;
    margin-top: 8px;
  }
  ::v-deep .el-form-item__content {
    line-height: 28px;
  }
  ::v-deep .el-input__inner {
    border: 0;
    background-color: #f7f7f7;
  }
}
</style>